<template>
  <view>
    <u-popup v-model="show" mode="bottom" border-radius="14" @close="closeThePopUpBox">
      <view>
        <view class="cu-dialog !bg-white !rounded-t-[1rem]" @click.stop>
          <view class="flex flex-col gap-4 py-5">
            <view class="flex justify-between items-center px-4">
              <view class="font-bold text-[1.25rem] text-[#171B24]">分享至</view>
              <view
                class="w-[1.5rem] h-[1.5rem] bg-[#F4F6F8] flex justify-center items-center rounded-full"
                @click="closeThePopUpBox"
              >
                <u-icon name="close" color="#171B24" size="26"></u-icon>
              </view>
            </view>
            <div class="bg-[#F4F6F8] w-full h-[.0625rem]"></div>
            <view class="grid grid-cols-4 gap-5 px-4">
              <view
                class="flex flex-col gap-2 justify-center items-center"
                v-for="(i, k) in shareList"
                :key="k"
                @click="handleShare(i)"
              >
                <view class="size-[2.875rem] rounded-full">
                  <u-image :src="`/static/${i.icon}.png`" class="!size-full" mode="aspectFill" />
                </view>
                <view class="text-[.6875rem] text-[#606368]">{{ i.name }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
  export default {
    name: 'yy-share',
    data() {
      return {
        show: false
      }
    },
    props: {
      shareList: {
        type: Array,
        default: []
      },
      showShare: {
        type: Boolean,
        default: false
      }
    },
    watch: {
      showShare: {
        immediate: true,
        deep: true,
        handler(newValue, oldValue) {
          this.show = newValue
        }
      }
    },
    methods: {
      closeThePopUpBox() {
        this.$emit('update:showShare', false)
      },
      handleShare(i) {
        this.$emit('handleShare', i)
      }
    }
  }
</script>

<style></style>
